import QtQuick 1.0

/*
  Select word list for a game.
 */
Item{
    id: wordSelectionView
    opacity: 0

    property string wordListUrl: ""
    property int numberOfWords: 0

    property Item gameView;

    function populateList(){        

        gameView.clearList();

        for(var i=0; i < wordListModel.count; i++){
            var item = wordListModel.get(i);
            if(item.selected){                
                gameView.addItemToList(item.word);
            }
        }
    }

    function getWords(){
       //XmlListModel would have been great, expect
       //XmlRole { name: "selected"; query: "false()" } results to string "false"
        var doc = new XMLHttpRequest();
        doc.onreadystatechange = function() {

            if (doc.readyState == XMLHttpRequest.DONE) {

                resetView();                

                var words = doc.responseXML.documentElement;

                for (var i = 0; i < words.childNodes.length; i++) {
                    if(words.childNodes[i].nodeName  == "word" ){
                        console.debug("value "+words.childNodes[i].firstChild.nodeValue);
                        wordListModel.append({"word": words.childNodes[i].firstChild.nodeValue, "selected": false})
                    }
                }
            }
        }
        doc.open("GET", wordSelectionView.wordListUrl);
        doc.send();
    }

    function resetView(){
        startGameButton.state = "";
        wordListModel.clear();
        wordSelectionView.numberOfWords =0;
    }

    Image {
        id: startGameButton
        x: 18
        y: 80
        width: 331
        height: 72
        opacity: 0.7
        source: "qrc:/btn"

        Text {
            id: startGameButtonText
            anchors.centerIn: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            text: "Select "+ (4 - wordSelectionView.numberOfWords) +" word(s)"
            font.pixelSize: 24
        }

        MouseArea {
            id: startGameButtonMa
            anchors.fill: parent
            onClicked: {
            }
        }


        states: [
            State {
                name: "enabled"
                PropertyChanges {
                    target: startGameButtonMa; onClicked: {screen.state ="gameView" }
                }
                StateChangeScript {
                    script: wordSelectionView.populateList();
                }

                PropertyChanges {
                    target: startGameButton; source:"qrc:/btnGo"
                }
                PropertyChanges {
                    target: startGameButtonText; text:""
                }
                PropertyChanges {
                    target: startGameButton; opacity:1
                }
            }
        ]
    }


    ListView {
        id: wordList
        x: 18
        y: 160
        width: 331
        height: 478
        model: wordListModel
        delegate: wordListDelegate
        spacing: 10
        clip: true
    }


    ListModel {
        id: wordListModel
    }

    Component {
        id: wordListDelegate


        BorderImage{
            id: listItem
            y: 10
            height: 73
            width: parent.width-20;
            opacity:  0.85
            source: mouseArea2.pressed ? "qrc:/rectYellow" :"qrc:/rectBlue"
            border { left: 5; top: 5; right: 5; bottom: 5 }
            horizontalTileMode: BorderImage.Repeat
            verticalTileMode: BorderImage.Repeat

            anchors.horizontalCenter: parent.horizontalCenter;

            Text {
                text: word
                anchors.centerIn: parent
                font.pixelSize: 24
                color: "white"
            }

            states: [
                State {
                    name: "selected"
                    PropertyChanges {
                        target: listItem; source: "qrc:/rectGreen"
                    }
                }
            ]

            state: (selected? "selected":"")

            MouseArea {id:mouseArea2

                anchors.fill: parent
                onClicked: {

                    if(!selected){

                        if(wordSelectionView.numberOfWords <4){
                            wordListModel.setProperty(index, "selected",true)
                            wordSelectionView.numberOfWords++;

                            if(wordSelectionView.numberOfWords == 4){
                                startGameButton.state = "enabled";
                            }
                        }
                    }else{
                        wordListModel.setProperty(index, "selected",false)
                        if(wordSelectionView.numberOfWords == 4){
                            startGameButton.state = "";
                        }
                        wordSelectionView.numberOfWords--;
                    }

                }
            }

        }
    }
}
